<script lang="ts" setup>
import { Field } from "vant";
import { ref, reactive, onMounted, computed, nextTick } from "vue";
// import normal from "@/image/new_img/inputv2_long_normal.png";
// import focus from "@/image/new_img/inputv2_long_focus.png";
// import errorImg from "@/image/new_img/inputv2_long_error.png";
//import guoqiBrazilImg from "@/image/new_img/guoqi_brazil.png";
import guoqiBrazilImg from "@/image/new_img/resized_flag.png";
import QuxiaoyulanBai from "@/image/new_img/quxiaoyulan_bai.png";
import YulanBai from "@/image/new_img/yulan_bai.png";
const props = defineProps({
  setValue: {
    type: [String, Number],
    default: "",
  },
  phone: {
    type: [String, Number],
    default: "",
  },
  letfIcon: {
    type: String,
    default: "",
  },
  areaCode: {
    type: String,
    default: "",
  },
  rigthIcon: {
    type: String,
    default: "",
  },
  areaCodeImg: {
    type: String,
    default: "",
  },
  inputType: {
    type: String,
    default: "text",
  },
  countryType: {
    type: String,
    default: "",
  },
  monitorType: {
    type: [String, Number],
    default: 0,
  },
  maxlength: {
    type: [String, Number],
    default: 25,
  },
  placeholder: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
interface GetDate {
  phone: number | string;
  letfIcon: string;
  areaCode: string;
  rigthIcon: string;
  areaCodeImg: string;
  inputType: string;
}

const propsData = reactive<GetDate>({
  phone: "",
  letfIcon: "",
  areaCode: "",
  rigthIcon: "",
  areaCodeImg: "",
  inputType: "text",
});
const focusType = ref(0);
// //获取焦点
const getFocus = () => {
  focusType.value = 1;
};
// //失去焦点
const loseBlur = () => {
  focusType.value = 0;
};
const monitorInput = res => {
  emits("monitorInput", res);
};
//清空输入框
const inputEmpty = () => {
  inputVal.value = "";
};
const inputVal = ref();
defineExpose({ inputEmpty });
const emits = defineEmits(["inputVal", "monitorInput"]);
onMounted(() => {
  propsData.inputType = props.inputType;
  nextTick(() => {
    inputVal.value = props.setValue;
  });
});

type FieldType = "text" | "number" | "password" | "tel" | "email";
const setInputType = () => {
  propsData.inputType = propsData.inputType === "password" ? "test" : "password";
};
const fieldType = computed<FieldType>(() => {
  return propsData.inputType as FieldType;
});
</script>
<template>
  <div class="input-frame">
    <!-- <div
      class="input-content"
      :style="{
        backgroundImage: `url(${
          focusType == 0 ? normal : focusType == 1 && monitorType !== 1 ? focus : errorImg
        })`,
      }"
    > -->
    <div class="input-content" :class="{ getfocus: focusType == 1, errorfocus: monitorType == 1 }">
      <img v-show="props.letfIcon" class="left-img-frame" :src="props.letfIcon" />
      <div v-if="countryType !== ''" class="df ai-center countryframe">
        <img class="country-img" :src="guoqiBrazilImg" />
        <div class="country-code">+880</div>
      </div>
      <div class="field-content">
        <Field
          v-model="inputVal"
          class="field-class"
          size="large"
          :disabled="props.disabled"
          :placeholder="props.placeholder"
          :maxlength="props.maxlength"
          color="#ffffff"
          :type="fieldType"
          @focus="getFocus"
          @blur="loseBlur"
          @update:model-value="monitorInput"
        />
      </div>
      <img
        v-if="props.rigthIcon"
        class="rigthIcon-frame"
        :src="propsData.inputType == 'password' ? QuxiaoyulanBai : YulanBai"
        @click="setInputType"
      />
    </div>
    <slot name="errorMessage"></slot>
  </div>
</template>
<style lang="less" scoped>
.input-frame {
  width: 100%;
  height: auto;
  overflow: hidden;

  .input-content {
    width: 652px;
    height: 92.3px;
    display: flex;
    align-items: center;
    background-size: 100% 100%;
    border: 1px solid #ffffff14;
    background-color: #ffffff0a;
    margin: auto;
    border-radius: 34px;
    // aspect-ratio:16/2;
  }

  .field-content {
    width: 78%;
  }

  .left-img-frame {
    margin-left: 32px;
    height: 40px;
    width: 40px;
  }
  .getfocus {
    border: 1px solid #ab3fe7;
  }
  .errorfocus {
    border: 1px solid #eb5757;
  }
}

.rigthIcon-frame {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  opacity: 1;
  padding: 6px;
  opacity: 0.5;
}

.country-img {
  width: 66px;

  margin-right: 6px;
  margin-left: 20.1px;
}

.country-code {
  color: #ffffffa6;
  font-size: 28px;
  font-family: monospace;
}
.field-class {
  font-family: monospace;
  font-size: 25px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 90%;
  margin: auto;
}
/deep/ .van-field__control {
  font-family: monospace;
  color: rgba(255, 255, 255, 0.85);
  font-size: 25px;
}
:deep(.van-cell) {
  padding: 0;
}
</style>
